<script setup>
const props = defineProps(['title', 'id', 'completed'])
const emits = defineEmits(['change'])

function onChange(event) {
  emitChange(event.target.checked)
}

function emitChange(v) {
  emits('change', v)
}
</script>

<template>
  <div class="TodoItem inline-flex items-center p-1 text-xl">
    <input
      type="checkbox"
      v-model="props.completed"
      @change="onChange"
      class="mr-2 w-4 h-4 rounded-md"
    />
    <div :class="props.completed ? 'line-through text-gray-500' : ''">{{ props.title }}</div>
  </div>
</template>

<style scoped lang="scss">
.TodoItem {
  // scss code
}
</style>
